<template>
	<div class="goods-info">
		<div class="goods-price">
			<div class="deal">
				<p>
					¥<span>{{ goodsInfo.endPrice | Fixed(2) }}</span>
				</p>
				<div class="subsidy">下单补贴¥{{ goodsInfo.allowanceMoney | Fixed(2) }}</div>
			</div>
			<div class="original">
				<p>¥{{ goodsInfo.price | Fixed(2) }}</p>
			</div>
		</div>
		<div class="goods-coupon">
			<p class="goods-title">
				<span class="label">
					<svg-icon class="icon" iconName="taobao" v-if="goodsInfo.shoptype === 0"></svg-icon>
					<svg-icon class="icon" iconName="tmall" v-if="goodsInfo.shoptype === 1"></svg-icon></span
				>{{ goodsInfo.title }}
			</p>

			<div class="coupon" @click="getPrivilege">
				<p class="amount">{{ goodsInfo.couponMoney }}元券</p>
				<p class="validity">
					<template v-if="seconds < 0">已过期</template>
					<template v-else>
						<van-count-down millisecond :time="seconds" format="DD天HH:mm:ss" />
						{{ couponFlag === 0 ? '开始' : '过期' }}
					</template>
				</p>
			</div>
		</div>
		<div class="shopping-course">
			<img src="@/assets/images/goods/course.png" alt="" />
			<div class="desc" @click="$router.push('/special-course')">
				<i class="iconfont icon-webicon209"></i>部分红包和购物券会影响百亿补贴专属优惠，详见<i class="iconfont icon-xiayiye"></i>
			</div>
		</div>

		<authorize-dig ref="authorizeDig"></authorize-dig>
		<!--<TbLoadingDig ref="tbDig"></TbLoadingDig>-->

		<!--复制成功-->
		<van-popup class="copy-popup" get-container="body" v-model="visible" closeable>
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
			</div>
		</van-popup>
		<van-popup class="prompt-popup" get-container="body" v-model="isShowPopup" closeable>
			<div class="main">
				<div class="main-title">温馨提示</div>
				<div class="main-value">亲亲，为迎合淘宝新规，您找的商品补贴 金有所调整，以实际的下单补贴准！</div>
				<div class="main-btj">补贴金为：￥{{ allowanceMoney }}</div>
				<div class="main-btn" @click="closePrompt">知道了，去抢购</div>
				<div class="main-jump" @click="jumpHelp">如何正确拿补贴呢？</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { CountDown, Popup, Toast, Dialog } from 'vant';
import moment from 'moment';
import { AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'GoodsInfo',
	components: {
		'van-count-down': CountDown,
		'van-popup': Popup,
		AuthorizeDig
	},
	props: {
		goodsInfo: {
			type: Object
		}
	},
	data() {
		return {
			seconds: 0,
			couponFlag: 1,
			visible: false,
			tkl: null,
			isShowPopup: false,
			allowanceMoney: 0
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {
		if (parseInt(this.goodsInfo.couponStarttime) - parseInt(moment().format('X')) > 0) {
			this.couponFlag = 0;
			this.seconds = (parseInt(this.goodsInfo.couponStarttime) - parseInt(moment().format('X'))) * 1000;
		} else {
			this.couponFlag = 1;
			this.seconds = (parseInt(this.goodsInfo.couponEndtime) - parseInt(moment().format('X'))) * 1000;
		}
	},
	methods: {
		// 获取淘口令
		getPrivilege() {
			if (this.userInfo.tbStatus === 1) {
				Toast.loading({
					duration: 0, // 持续展示 toast
					message: '正在生成淘口令...'
				});
				let params = {
					title: this.goodsInfo.title,
					itemId: this.goodsInfo.gid,
					endPrice: this.goodsInfo.endPrice,
					comparison: 1,
					couponMoney: this.goodsInfo.couponMoney
				};
				this.$service.shopping.taobao.privilege(params).then(res => {
					if (res.tkl) {
						this.tkl = res.tkl;
					} else {
						this.tkl = res.coupon_click_url;
					}
					Toast.clear();
					console.log(Number(res.min_commission_rate));
					console.log(Number(this.goodsInfo.commissionRate));

					if (Number(res.min_commission_rate) < Number(this.goodsInfo.commissionRate)) {
						this.isShowPopup = true;
						this.allowanceMoney = res.min_allowanceMoney;
						return false;
					} else {
						this.copyTlj(this.tkl);
					}
					// 复制淘口令
					// let input = document.createElement("input");
					// input.value = this.tkl;
					// document.body.appendChild(input);
					// input.select();
					// document.execCommand("Copy");
					// document.body.removeChild(input);
				});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		},
		closePrompt() {
			this.copyTlj(this.tkl);
			this.isShowPopup = false;
		},
		copyTlj(val) {
			console.log(val);
			window.BestpayHtml5.System.setClipboardContent(
				{
					data: val
				},
				() => {
					this.visible = true;
					setTimeout(() => {
						this.visible = false;
					}, 5000);
				}
			);
		},
		jumpHelp() {
			this.$router.push({
				path: '/member-help',
				query: {
					id: 39
				}
			});
		}
	},
	destroyed() {
		Toast.clear();
	}
};
</script>

<style lang="scss" scoped>
.goods-info {
	.goods-price {
		width: 100%;
		height: 124px;
		background: linear-gradient(225deg, #f76a11, $main-color);
		color: $color-white;
		padding: 18px 34px;
		.deal {
			font-size: 24px;
			@include flexBox(null, center);
			span {
				font-size: 32px;
				font-weight: 600;
			}
			.subsidy {
				margin-left: 20px;
				background: #fbe4c5;
				border-radius: 8px;
				color: $main-color;
				padding: 4px 10px;
			}
		}
		.original {
			p {
				font-size: 28px;
				text-decoration: line-through;
				color: #ffd8d8;
			}
		}
	}
	.goods-coupon {
		padding: 16px 26px;
		background: $color-white;
		.goods-title {
			font-size: 28px;
			color: #3a3a3a;
			@include ellipsis(2);
			svg {
				margin-right: 10px;
			}
		}
		.coupon {
			width: 616px;
			height: 152px;
			background: url('../../../../assets/images/goods/coupon.png') no-repeat center center;
			background-size: 100% 100%;
			margin: 20px auto;
			transition: 0.5s;
			@include flexBox(null, center);
			.amount {
				color: $main-color;
				font-size: 36px;
				width: 180px;
				margin-left: 10px;
				text-align: center;
			}
			.validity {
				color: #7b6341;
				font-size: 24px;
				width: 240px;
				@include flexBox(center);
				/deep/.van-count-down {
					color: #7b6341;
					font-size: 24px;
					margin-right: 4px;
				}
			}
			&:hover,
			&:focus,
			&:active {
				transform: scale(1.05);
			}
		}
	}
	.shopping-course {
		width: 100%;
		img {
			width: 100%;
			display: block;
		}
		.desc {
			font-size: 22px;
			color: #6f4a43;
			width: 100%;
			height: 40px;
			background: #ffebe6;
			@include flexBox(center, center);
			.icon-webicon209 {
				font-size: 40px;
				margin-right: 4px;
			}
			.icon-xiayiye {
				margin-left: 80px;
				font-size: 26px;
			}
		}
	}
}
.copy-popup {
	width: 452px;
	height: 336px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
	}
}
/deep/ .van-overlay {
	position: absolute;
}
/deep/ .van-popup {
	position: absolute;
}
.prompt-popup {
	width: 580px;
	height: 554px;
	border-radius: 12px;
	overflow: hidden;
	.main {
		.main-title {
			color: #0d0d0d;
			font-size: 32px;
			text-align: center;
			margin-top: 48px;
		}
		.main-value {
			color: #1e1e1e;
			font-size: 28px;
			padding: 0 38px;
			margin-top: 44px;
		}
		.main-btj {
			color: #f70114;
			font-size: 32px;
			text-align: center;
			margin-top: 44px;
		}
		.main-btn {
			width: 272px;
			height: 68px;
			border-radius: 50px;
			margin: auto;
			margin-top: 56px;
			background-color: #f70114;
			text-align: center;
			line-height: 68px;
			color: #ffffff;
			font-size: 28px;
		}
		.main-jump {
			color: #717076;
			font-size: 28px;
			text-align: center;
			margin-top: 26px;
		}
	}
}
</style>
